<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
	  <meta http-equiv="cache-control" content="no-cache">
	  <meta http-equiv="expires" content="0">    
	  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	  <meta http-equiv="description" content="This is my page">
   
    <script src="/js/vue.min.js"></script>
    <script src="/js/httpVueLoader.js"></script><!-- 引入 http-vue-loader -->   
    <script type="text/javascript" src="/js/axios.min.js"></script>

    <link href="/css/front.css" rel="stylesheet">

    <script type="text/javascript" src="/layer/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script>
    
</head>

<body>
<div id="app">
<my-header></my-header> 


<article> 
  <!--左侧-->
  <div class="lbox"> 
    
    
    <!-- 444 -->
     <div class="zhuanti whitebg" style="margin-top: 12px;">
      <!-- <h2 class="htitle"><span class="hnav"></span>新闻动态</h2> -->
      <div style="padding-left: 33px;"><input type="button" value="申请加入志愿者" 
                   style="width: 188px;height: 33px;" onclick="jiaruAdd()"/>
      </div>
      <ul>
        <li v-for="(renyuan, index) in xianshilist" :key="renyuan.id">
           <i class="ztpic" style="height: 238px;">
              <a :href="'/view/renyuan/renyuanDetail.html?id='+renyuan.id">
                  <img :src= "renyuan.fujian" style="height: 230px;"/></a>
           </i>
           <center>
               <a :href="'/view/renyuan/renyuanDetail.html?id='+renyuan.id">
               <b>{{renyuan.xingming}}</b></a></center>
        </li>
      </ul>
    </div>
    <!-- 444 -->
    
    
    
    
    
    
    
    
    
  </div>
  <!--左侧-->
  
  
  
  
  
  
  
  
  <!--右侧-->
  <div class="rbox">
      <my-right></my-right>
  </div>
  <!--右侧-->
  
  
</article>



<my-foot></my-foot>



    
</div>


<script>
    function jiaruAdd()
    {
        var userJsonString = localStorage.getItem("user");
        if(userJsonString ==null)//判断是否登录
        {
            alert("请先登录");
            return false;
        }
                
        var url = "/view/jiaru/jiaruAdd.html";
        layer.open({
            content: url,
            type: 2,
            title: '&nbsp;',
            shadeClose: true,
            shade: false,
            maxmin: false, //开启最大化最小化按钮
            area: ['750px', '550px'],
            cancel:function aa(layero, index) {},

            });
    }



    new Vue({
        el: '#app',
        data: 
        {
          total:0,
          pageSize:64,
          currentPage:1,//当前页

          renyuanList:[],
                xianshilist: null,	
                
        },
        
        methods: 
        {
              getData()
              {
                      axios({
                    method: 'POST',
                    url: '/renyuanAll',
                    params:{
                      
                    }
                    }).then(data => {
                      if (data.data.state == 66)
                      {
                        this.renyuanList=data.data.data;
                        this.total=this.renyuanList.length;
                        
                                      this.xianshilist = this.renyuanList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
                      } 
                        
                    }).catch(error => {
                      alert(error);
                  })
              },

          },
        
          created()
          {
              this.getData();
          },

       
     
          components: {
                  'my-header': httpVueLoader('/components/my-header.vue'),
                  'my-foot': httpVueLoader('/components/my-foot.vue'),
                  'my-right': httpVueLoader('/components/my-right.vue'),
          }
    })
</script>
</body>

</html>